<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state简写方式</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <script type="text/babel">
        class Lss extends React.Component {
            state = { opacity: 1 }
            destroy = () => {
                // 卸载DOM的api
                ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
            }
            componentDidMount() {
                console.log('组件挂载钩子componentDidMount',);
                this.time = setInterval(() => {

                    let opacity = this.state.opacity

                    opacity = opacity - 0.1

                    if (opacity <= 0) { // 考虑到js小数的精度问题，所以这里要写小于等于
                        this.setState({ opacity: 1 })
                    } else {
                        this.setState({ opacity: opacity })
                    }

                }, 200);
            }
            componentWillUnmount() {
                console.log('组件卸载钩子componentWillUnmount',);
                clearInterval(this.time)
            }
            render() {
                return (
                    <div>
                        <h2 style={{ opacity: this.state.opacity }}>加油学习React</h2>
                        <button onClick={this.destroy}>点击卸载组件</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Lss />, document.querySelector('#test'))

        /**
         * 
         * 旧版本生命周期----挂载
         *      constructor
         *      conponentWillMount
         *      render
         *      componentDidMount
         * 
         * 旧版本生命周期----更新
         *      ？？？
         * 
         * 旧版本生命周期----卸载
         *      ？？？
         * */

    </script>
</body>

</html>